import React from 'react';
import {connect} from 'dva';
import styles from './index.less';
import { Accordion, Button } from 'antd-mobile';

/**
 * 报销金额
 */
class cReimbursableAmount extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }
  render(){
    return (
      <div className={styles.baseList}>
        <div className={`${styles.item} ${styles.blockItem}`}>
          <div className={styles.des}>Amount Details</div>
            {
              this.props.detail.mast.companyCode == '1100'
              ?
              <div className={styles.value}>
                <div className={styles.labels}>
                  <div className={styles.label}>
                    GL Account
                  </div>
                  <div className={styles.label}>
                    RMB Equiv
                  </div>
                </div>
                <Accordion className={styles.cList} onChange={this.onChange}>
                  {
                    this.props.detail.mast && this.props.detail.mast.orsVats && this.props.detail.mast.orsVats.map((item, index) => {
                      const headerDom = (cc) => {
                        return (
                          <div className={styles.headerValues}>
                            <div>{cc.glAccount}</div>
                            <div>{cc.equivRMB}</div>
                          </div>
                        )
                      }
                      return (
                        <Accordion.Panel header={headerDom(item)} key={index}>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>GL Account</div>
                            <div className={styles.cValue}>{item.glAccount}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>RMB Equeiv</div>
                            <div className={styles.cValue}>{item.equivRMB}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>VAT Amount(RMB)</div>
                            <div className={styles.cValue}>{item.taxRMB}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>AMT after IV(RMB)</div>
                            <div className={styles.cValue}>{item.adjustRMB}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>AMT(USD)</div>
                            <div className={styles.cValue}>{item.amtUSD}</div>
                          </div>
                        </Accordion.Panel>
                        )
                      })
                    }
                 </Accordion>
              </div>
              :
              <div className={styles.value}>
                <div className={styles.labels}>
                  <div className={styles.label}>
                    Text
                  </div>
                  <div className={styles.label}>
                    Debit
                  </div>
                  <div className={styles.label}>
                    Credit
                  </div>
                </div>
                <Accordion className={styles.cList} onChange={this.onChange}>
                  {
                    this.props.detail.mast && this.props.detail.mast.orsVats && this.props.detail.mast.orsVats.map((item, index) => {
                      const headerDom = (cc) => {
                        return (
                          <div className={styles.headerValues}>
                            <div>{cc.sGTXT}</div>
                            <div>{cc.wRBTR_SDISP}</div>
                            <div>{cc.wRBTR_H}</div>
                          </div>
                        )
                      }
                      return (
                        <Accordion.Panel header={headerDom(item)} key={index}>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>#</div>
                            <div className={styles.cValue}>{item.pOSNR}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>Text</div>
                            <div className={styles.cValue}>{item.sGTXT}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>GL Account</div>
                            <div className={styles.cValue}>{item.hKONT}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>Account Discription</div>
                            <div className={styles.cValue}>{item.tXT20}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>Debit</div>
                            <div className={styles.cValue}>{item.wRBTR_SDISP}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>Credit</div>
                            <div className={styles.cValue}>{item.wRBTR_H}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>Profit Center</div>
                            <div className={styles.cValue}>{item.pRCTR}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>WBS Code</div>
                            <div className={styles.cValue}>{item.pOSID}</div>
                          </div>
                          <div className={styles.cItem}>
                            <div className={styles.cDes}>Cost Center</div>
                            <div className={styles.cValue}>{item.kOSTL}</div>
                          </div>
                        </Accordion.Panel>
                        )
                      })
                    }
                 </Accordion>
              </div>
            }
             {
               !this.props.edit
               ?
               null
               :
               <Button style={{width: '150px', margin: '5px'}} onClick={this.handleShowPanel}>Add</Button>
             }
        </div>
      </div>
    )
  }
}


function mapStateToProps(state) {
  return {
    ...state.detail
  }
}
export default connect(mapStateToProps)(cReimbursableAmount);
